<template>
  <bs-dialog v-model="visible" :title="title" :width="800" :confirm-btn-fn="handleConfirm">
    <bs-form ref="formRef" :model="formData" class="form-area" :grid="2" :label-width="100">
      <bs-form-item label="名称">
        <bs-input v-model="formData.names" placeholder="请输入名称"></bs-input>
      </bs-form-item>
      <bs-form-item label="供应商">
        <bs-select v-model="formData.vendor_name">
          <bs-option v-for="(item, index) in optionList.vendor" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="管理IP">
        <bs-input v-model="formData.manage_ips" placeholder="请输入管理IP"></bs-input>
      </bs-form-item>
      <bs-form-item label="机房">
        <bs-select v-model="formData.idc_names" @change="handleRoomChange">
          <bs-option v-for="(item, index) in optionList.room" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="模块">
        <bs-select v-model="formData.idc_model_names"  @change="handleModelChange">
          <bs-option v-for="(item, index) in optionList.model" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="机柜">
        <bs-select v-model="formData.rack_namess">
          <bs-option v-for="(item, index) in optionList.rack" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="型号">
        <bs-select v-model="formData.model_name">
          <bs-option v-for="(item, index) in optionList.modelName" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="U位">
        <bs-input v-model="formData.u_location" placeholder="U位"></bs-input>
      </bs-form-item>
      <bs-form-item label="类型">
        <bs-select v-model="formData.asset_type"></bs-select>
      </bs-form-item>
      <bs-form-item label="序列号">
        <bs-input v-model="formData.serial_num" placeholder="请输入序列号"></bs-input>
      </bs-form-item>
      <bs-form-item label="状态">
        <bs-select v-model="formData.status_name">
          <bs-option v-for="(item, index) in optionList.status" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="系统">
        <bs-input v-model="formData.system" placeholder="请输入操作系统"></bs-input>
      </bs-form-item>
      <!-- <bs-form-item label="虚机">
        <bs-select v-model="formData.addr"></bs-select>
      </bs-form-item> -->
      <bs-form-item label="CPU型号">
        <bs-input v-model="formData.cpu_model" placeholder="请输入CPU型号"></bs-input>
      </bs-form-item>
      <bs-form-item label="归属人">
        <bs-input v-model="formData.manager_name" placeholder="请输入归属人"></bs-input>
      </bs-form-item>
      <bs-form-item label="CPU核数">
        <bs-input v-model="formData.cpu_number" placeholder="请输入CPU核数"></bs-input>
      </bs-form-item>
      <bs-form-item label="域账号">
        <bs-input v-model="formData.manager_account" placeholder="请输入域账号"></bs-input>
      </bs-form-item>
      <bs-form-item label="CPU逻辑核数">
        <bs-input v-model="formData.vcpu_number" placeholder="请输入CPU逻辑核数"></bs-input>
      </bs-form-item>
      <bs-form-item label="联系电话">
        <bs-input v-model="formData.manager_tel" placeholder="请输入联系电话"></bs-input>
      </bs-form-item>
      <bs-form-item label="用途">
        <bs-input v-model="formData.purpose" placeholder="请输入用途"></bs-input>
      </bs-form-item>
      <bs-form-item label="备注">
        <bs-input v-model="formData.memos" type="textarea" placeholder="请输入备注"></bs-input>
      </bs-form-item>
    </bs-form>
  </bs-dialog>
</template>
<script lang="ts" setup>
import {ref, nextTick} from 'vue'
import {useOption} from '../../hooks/network'
import * as API from '@/service/modules/resource'
import {ElMessage} from 'element-plus'

const emit = defineEmits(['confirmed'])

const {optionList, getOptionList, getModelOption, getRackOption, clearOption} = useOption()

const initFormData = () => ({
  /**设备名称 */
  names: '',
  /**机房 */
  idc_names: '',
  /**管理地址 */
  manage_ips: '',
  /**模块 */
  idc_model_names: '',
  /**供应商 */
  vendor_name: '',
  /**机柜 */
  rack_namess: '',
  u_location: '',
  /**类型 */
  asset_type: '',
  model_name: '',
  /**备注 */
  memos: '',
  /**序列号 */
  serial_num: '',
  status_name: '',
  system: '',
  /**cpu型号*/
  cpu_model: '',
  /**归属人 */
  manager_name: '',
  /**cpu核数 */
  cpu_number: '',
  /**域账号 */
  manager_account: '',
  /**cpu逻辑核数 */
  vcpu_number: '',
  /**联系电话 */
  manager_tel: '',
  /**用途 */
  purpose: ''
})

const formRef = ref()
const visible = ref(false)
const title = ref('')
const info = ref()
const formData = ref<Record<string, string>>(initFormData())

const handleRoomChange = (val:any, isInit?: boolean) => {
  if (!isInit) {
    formData.value.idc_model_names = ''
    formData.value.rack_namess = ''
    clearOption('model')
    clearOption('rack')
  }
  if (val) {
    getModelOption({datacenterss: val})
  }
}

const handleModelChange = (val:any, isInit?:boolean) => {
  if (!isInit) {
    formData.value.rack_namess = ''
    clearOption('rack')
  }
  if (val) {
    getRackOption({datacenterss: formData.value.idc_names, models: val})
  }
}


/**
 * 打开弹框
 */
const open = (item?:any) => {
  visible.value = true
  if (item) {
    title.value = '资产数据维护'
    info.value = item
    formData.value = {
      ...initFormData(),
      ...item
    }
  } else {
    title.value = '资产数据录入'
    formData.value = initFormData()
  }
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

/**
 * 确定
 */
const handleConfirm = async () => {
  await formRef.value.validate()
  // 编辑维护
  if (info.value) {
    await API.updateResource({
      cc: 'server-device',
      res_id: info.value.id
    }, {
      ...formData.value
    })
    ElMessage.success('资产数据维护成功')
  } else { // 新增
    await API.addResource({
      cc: 'server-device'
    }, {
      ...formData.value
    })
    ElMessage.success('资产数据录入成功')
  }
  emit('confirmed')
}

const init = () => {
  getOptionList()
}

init()

defineExpose({
  open
})

</script>
<style lang="scss" scoped>
.form-area {
  padding: 16px;
  .input-wrap {
    display: flex;
    justify-content: space-between;
    .input-item {
      width: calc(50% - 4px)
    }
  }
}
</style>
